<template>

		<view class="u-padding-bottom-15" >
			<view class="search-box">
				<u-search @search="handleSelect" v-model="querys.keyword" class="u-flex-1" height="68"
					:show-action="false" placeholder="关键字搜索"></u-search>
				<view class="search-more" @click="handleSearchOpen">
					<image src="@/static/img/icon_screen_supplier@2x.png"></image>
				</view>
			</view>

			<view class="order-body" v-if="tableData.length>0">
				<c-order-item :details="item" v-for="(item,index) in tableData" :key="index" />
			</view> 
			<u-empty v-else  src="https://supply.zhongyimotor.com/upload/applet/maorder_kong_img@2x.png" icon-size="296"
				margin-top="80" text="您目前还没有订单～"></u-empty>
			<u-popup @close="handleSearchClose" closeable v-model="searchShow" mode="bottom" border-radius="12">
				<view class="search-title">订单筛选</view>
				<view class="search-form">
					<u-form :model="querys" label-position="top">
						<u-form-item label="订单筛选" :border-bottom="false">
							<u-search v-model="querys.keyword" height="72" :show-action="false"
								placeholder="关键字搜索"></u-search>
						</u-form-item>
						<u-form-item label="订单状态" :border-bottom="false">
							<view class="unclickable-input" @click="handleOrderStatusOpen">
								<text :class="querys.status?'exist':'inexistence'">
									{{getStatusLabel(orderType,querys.status) || '请选择状态'}}
								</text>
							</view>
						</u-form-item>

						<u-form-item label="下单时间" :border-bottom="false">
							<view class="u-flex" @click="handleOrderTimeOpen">
								<view class="u-flex-1 unclickable-input u-text-center">
									<text :class="querys.startTime?'exist':'inexistence'">
										{{querys.startTime || '起始时间'}}
									</text>
								</view>
								<view class="u-margin-left-26 u-margin-right-26" style="color:#8D8D8D ;">
									-
								</view>
								<view class="u-flex-1 unclickable-input u-text-center">
									<text :class="querys.endTime?'exist':'inexistence'">
										{{querys.endTime || '中止时间'}}
									</text>
								</view>
							</view>
						</u-form-item>
						<u-form-item  :border-bottom="false">
							<view class="u-flex">
								<u-button class="u-flex-1 u-margin-right-10" shape="circle"
									@click="handleReset">重置</u-button>
								<u-button type="success" :custom-style="{
								'background':'#0FBD7F',
								'color':'#fff'
							}" class="u-flex-1" shape="circle" @click="handleSelect">确定</u-button>
							</view>
						</u-form-item>
					</u-form>
				</view>
			</u-popup>
			<c-calendar v-model="orderTimeShow" mode="range" @change="onDatetimeChange" />
			<u-select v-model="orderStatusShow" :list="orderType" @confirm="onOrderStatusChange"></u-select>
		</view>

		

</template>

<script>
	import cCalendar from '@/components/c-calendar/index.vue'
	import cOrderItem from './components/c-order-item.vue'
	import {
		orderType,
		getStatusLabel
	} from "@/utils/status.js";
	export default {
		components: {
			cCalendar,
			cOrderItem
		},
		data() {
			return {
				orderType,
				searchShow: false,
				orderTimeShow: false,
				orderStatusShow: false,
				querys: {
					current: 1,
					size: 10
				},
				tableData: []
			}
		},
		onShow() {
			this.handleSelect()
		},
		onReachBottom() {
			this.querys.current += 1;
			this.getTableList()
		},
		methods: {
			getTableList() {
				const params = JSON.parse(JSON.stringify(this.querys))
				const that = this
				uni.showLoading({
					title: '加载中...'
				});
				that.$api.getOrderList(params).then(res => {
					if (params.current === 1) {
						that.tableData = res.result.records
					} else {
						that.tableData = [...that.tableData, ...res.result.records]
					}
					console.log(that.tableData.length);
					uni.hideLoading();
				})
			},
			handleSelect() {
				this.querys.current = 1
				this.getTableList()
				this.handleSearchClose()
			},
			handleReset() {
				this.querys = {
					current: 1,
					size: 10
				}
				this.getTableList()
				this.handleSearchClose()
			},
			getStatusLabel,
			onOrderStatusChange(items) {
				this.$set(this.querys, 'status', items[0].value)
			},
			onDatetimeChange(date) {
				this.$set(this.querys, 'startTime', date.startDate)
				this.$set(this.querys, 'endTime', date.endDate)
			},
			handleOrderStatusOpen() {
				this.orderStatusShow = true
			},
			handleOrderTimeOpen() {
				this.orderTimeShow = true
			},
			handleSearchOpen() {
				this.searchShow = true
			},
			handleSearchClose() {
				this.searchShow = false
			},
		}
	}
</script>
<style>
	page {
		background: #F7F7F7;
	}
</style>
<style scoped lang="less">
	.search-box {
		padding: 15px;
		background: #fff;
		display: flex;
		align-items: center;

		.search-more {
			width: 16px;
			height: 16px;
			margin-left: 15px;

			&>image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.search-title {
		margin-top: 30rpx;
		font-weight: bold;
		color: #202020;
		font-size: 16px;
		text-align: center;
	}

	.search-form {
		margin: 20px;

		/deep/ .u-icon-wrap {
			display: none !important;
		}
	}



	.order-body {
		margin-left: 15px;
		margin-right: 15px;
		margin-bottom: 10px;
	}
</style>